【JavaScript】DOM之Document对象

头像
佐珥玎
    阅读 6 分钟

    JS(JavaScript)

    一.Document对象

    1.Document对象是什么

    • Document对象

    是DOM的基本规范也是重要的对象之一，以访问，更新页面内容的属性和方法
    通过conslie。log()方法来Document对象打印，测试该对象的属性和方法

    <body>
<script>
    /*
        document对象
        * DOM预定义 - 已经被创建完毕了 - 允许直接使用
        * 得到的是HTML页面的源代码 - 该对象代表当前HTML页面
     */
    console.log(document);
    // document的确是一个JavaScript对象
    console.log(document instanceof Object);// true
    // document对象的属性和方法被定义在原型上
    console.log(Document.prototype);
    // 不再需要我们创建了
    var document = new Document();
    console.log(document);

</script>
</body>
    • 继承链关系
    <body>
<script>
    // document对象是继承于Node的
    console.log(Document.prototype instanceof Node);
    // node对象是继承于EventTarget的
    console.log(Node.prototype instanceof EventTarget);

    console.log(Document.prototype instanceof EventTarget);
    // DOM中的对象之间的继承关系远比语法中的继承关系复杂
    console.log(Document.prototype instanceof HTMLDocument);

</script>
</body>

    2.定位页面元素

    • getElementById()方法

    该属性特点是唯一不可重复

    <body>
<button id="ben">按钮</button>
<div id="q1"></div>
<script>
    var buttonElement = document.getElementById('btn');
//    通过Document对象getElementById()方法定义元素
    console.log(buttonElement instanceof Object);//true
    /*
    * 打印测试结果-对应元素HTML代码
    * DOM是使用还是地道都应该是对象
     */
    console.log(buttonElement instanceof HTMLButtonElement);
    /*
    * DOM提供一系列对象-对应HTML页面每个元素
    * <button>元素都具有HTMLButtonElement对象
    * <div>元素都具有HTMLDivElement对象
     */
    var q1 = document.getElementById('q1');
    console.log(q1 instanceof HTMLDivElement);//true
</script>
</body>
    • getElementsByName()方法

    name是参数表示定位元素name属性值
    name属性不唯一 - 得到结果可能是一个或多个

    <body>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<script>
    var buttonElements = document.getElementsByName('btns');
//    name属性不唯一 - 得到结果可能是一个或多个
    console.log(buttonElements[0]);
    console.log(buttonElements instanceof NodeList);//true
    /*NodeList集合-类数组对象
    * 得到每个对应元素，通过索引值
     */
</script>
</body>
    • 节点集合NodeList
    <body>
<button class="btns" id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    var btnElements = document.getElementsByClassName('btns');
    console.log(btnElements);//HTMLCollection

/*    console.log(btnElements.length);//5
//    打印当前集合长度
    var btn = document.getElementById('btn');
//    删除当前集合中某个元素
    var body = document.body;
    body.removeChild(btn);
    console.log(btnElements.length);//4
//    再一次打印当前集合长度
 */
    var buttonElements = document.querySelectorAll('.btns');
    console.log(buttonElements);//NodeList
    console.log(buttonElements.length);//5
    //    打印当前集合长度
    var btn = document.getElementById('btn');
    //    删除当前集合中某个元素
    var body = document.body;
    body.removeChild(btn);
    console.log(buttonElements.length);//5
    //    再一次打印当前集合长度
</script>
</body>
    • getElementsByTagName()方法

    name是参数，表示定位元素的元素名
    elements是返回值

    <body>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<script>
    var buttonElements = document.getElementsByTagName('button');
//    HTMLCollection集合-类数组对象
    console.log(buttonElements[0]);
</script>
</body>
    • 定位元素元素属性
    <body>
<button class="btns" id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    console.log(document.documentElement);
//    获取到根元素(HTML)
    console.log(document.head);
//    获取到头部(head)
    console.log(document.body);
//    获取到文件内容(boby)
    console.log(document.images);
//    获取到页面所有的图片(images)
</script>
</body>
    • getElementsByClassName()方法

    names是参数，表示定位元素的class属性值
    names参数是可以是一个样式属性名称或多个样式属性名称

    <body>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    var buttonElement = document.getElementsByClassName('btns');
//    HTMLCollection集合-类数组对象
    console.log(buttonElements);
</script>
</body>
    • querySelector()方法

    是通过CSS选择器定位第一个匹配元素
    selectors是参数表示选择器以多个逗号分隔，并包含一个或多个CSS选择器
    element是返回值

    <body>
<button id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    var buttonElement1 = document.querySelector('#btn');
    console.log(buttonElement1);
    //    方法返回是第个匹配元素
    var buttonElement2 = document.querySelector('.btns');
    console.log(buttonElement2);
    var buttonElements = document.querySelectorAll('.btns');
    console.log(buttonElements);
    //    querySelectorAll()方法返回的是NodeList集合
</script>
</body>

    3.创建页面元素

    • 创建元素节点

    tagName是参数，表示创建元素节点
    element是返回值

    <body>
<script>
    var btn = document.createElement('button');
//    创建<button>元素
    var body = document.body;
//    获取<body>元素
    body.appendChild(btn);
//    向<body>元素增加子节点
</script>
</body>
    • 创建文本节点

    data是参数，表示文本节点的内容(字符串)
    textNode是返回值

    <body>
<script>
    var btn = document.createElement('button');
//    创建<button>元素
    var textNode = document.createTextNode('按钮');
//    创建文本节点
    btn.appendChild(textNode);
//    向<button>元素增填子节点
    var body = document.body;
//    获取<body>元素
    body.appendChild(btn);
//    向<body>元素增添字节点
</script>
</body>
    • 创建属性节点

    name是参数是指属性节点的名称
    attributeNode是返回值

    <body>
<script>
    // 1.创建<button></button>元素
    var btn = document.createElement('button');

    // 2.创建文本节点
    var textNode = document.createTextNode('按钮');
    // 3.向<button>元素添加子节点
    btn.appendChild(textNode);

    // 4.创建属性节点
    var attrNode = document.createAttribute('id');
    // 5.为属性节点设置值
    attrNode.nodeValue = 'btn';
    // 6.为<button>元素设置属性节点
    btn.setAttributeNode(attrNode);

    // 4.获取<body>元素
    var body = document.body;
    // 5.向<body>元素添加子节点
    body.appendChild(btn);

</script>
</body>
    htmljavascript
    佐珥玎
    41 声望8 粉丝
    « 上一篇
    【JavaScript】面向对象之严格模式
    下一篇 »
    【JavaScript】面向对象之String类型

    引用和评论

    推荐阅读
    头像
    【Ajax】之jQuery中的Ajax

    佐珥玎阅读 1.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新